<template>
    <div class="module_ userCenter">
        <div class="hospitalInfo box">
            <el-form autocomplete="off"  label-position="right" label-width="100px" :model="hospitalInfo">
                <el-form-item label="医院logo：">
                    <div>
                        <el-image class="logo_img" :src="hospitalInfo.hospital_logo" @click="clickUpload">
                            <div slot="error" class="image-slot flex-center" :style="{height:'60px'}"  @click="clickUpload">
                                <i class="el-icon-picture-outline img_icon"></i>
                            </div>
                        </el-image>
                        <input type="file" ref="file" accept="image/*"  @change="uploadImg" style="display:none">
                        <p class="c-9">建议尺寸200x40</p>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="医院名称：">
                    <el-input type="text" size="medium" v-model="hospitalInfo.hospital_name" />
                </el-form-item>
                <el-form-item label="医院地址：">
                    <el-input type="text" size="medium" v-model="hospitalInfo.hospital_area" />
                </el-form-item>
                <el-form-item label="医院简介：">
                    <el-input  type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" size="medium" v-model="hospitalInfo.hospital_description" />
                </el-form-item> -->
                <el-form-item>
                   <p class="flex-justify-bcenter">
                       <span></span>
                       <el-button type="primary" @click="submit" :loading='loading'>提交</el-button>
                   </p>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import {Apihospitalinfo,ApihospitalinfoPut} from '@/api'
import { mapMutations } from "vuex";
import {uploadUrl} from '@/api/request'
import {debounce} from "@/utils"

export default {
    data(){
        return {
            hospitalInfo:{

            },
            imgFiles:null,
            loading: false,
            defaultLogo: require("@/assets/img/logo.png"),
        }   
    },
    mounted(){
        this.getHospitalinfo()
    },
    methods:{
        ...mapMutations(['setLogo']),
        getHospitalinfo(flag=false){
            Apihospitalinfo().then(({data}) => {
                this.hospitalInfo = data
                if(data.hospital_logo) {
                    this.hospitalInfo.hospital_logo =  uploadUrl() + data.hospital_logo
                    this.setLogo(this.hospitalInfo.hospital_logo)
                }
                else this.hospitalInfo.hospital_logo = this.defaultLogo
                 
            })
        },
        clickUpload(){
            this.$refs.file.click()
        },
        uploadImg(event){
            const files = event.target.files[0]
            this.imgFiles = files
            this.hospitalInfo.hospital_logo = URL.createObjectURL(files)
        },
        submit: debounce(function (){
            const formData = new FormData()
            if(this.imgFiles) formData.append("hospital_logo", this.imgFiles);
            
            formData.append("hospital_name", this.hospitalInfo.hospital_name);
            formData.append("hospital_area", this.hospitalInfo.hospital_area);
            formData.append("hospital_description", this.hospitalInfo.hospital_description);
            this.loading = true
            ApihospitalinfoPut(formData,{
                headers:{'Content-Type':'multipart/form-data'}
            }).then(res =>{
                this.loading = false
                this.$message.success('提交成功')
                this.getHospitalinfo(true)
            }).catch(()=>{
                this.loading = false
                this.$message.error('提交失败')
            })
        },500,true)
    }
}
</script>

<style lang='less' scoped>
.logo_img{
    width: 240px;
    height: 60px;
    border: 1px solid #EBEEF5;
}
.img_icon{
    font-size: 40px;
}
.userCenter{
    align-items: center;
    // justify-content: center;
    padding-top:80px ;
}
.hospitalInfo{
    width: 50%;
    min-width: 400px;
    box-sizing: border-box;
    padding: 32px 16px 8px;
    // padding: 30px 0 0 50px;
}
</style>